<template>
  <uni-popup ref="popup" type="center" :is-mask-click="false">
    <view class="popup" style="background-color: #fff">
      <view class="">请输入金额（元）</view>
      <view>
        <input class="uni-input" type="digit" v-model="number" maxlength="6" @input="inputeve" />
        <view>
          加注量：
          <text>{{ text }}</text>
        </view>
      </view>
      <view>
        <text @click="delFilling()">取消</text>
        <text @click="sureFilling()">确定</text>
      </view>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
  /**
 * @component
 * @desc 自定义定量定额弹框
 * @property {Boolean} show 弹框显示
 * @property {String} number 输入的金额/加注量
 * @property {String | Number} text 弹框内的计算金额/加注量
 * @property {String} money 最多加注金额
 * @property {String} quantity 最多加注量
 * @property {String} fill_price 余额支付的价格
 */

  import { showToast } from '@/utils/prompt';
  import { nextTick, ref } from 'vue';
  import { authorMe } from '@/gql/user';
  import { toPublish } from '@mqtt';

  const props = defineProps({
    fill_price: {
      type: Number,
      default: 0,
    },
    type: {
      type: String,
      default: '',
    },
  });

  const number = ref('');
  const money = ref()
  const text = ref(0);
  // refs
  const popup = ref(null);

  const emit = defineEmits(['moneyInfo', 'delFilling', 'sureFilling']);

  init()
  function init() {
    const payload = {
      query: authorMe,
      variables: {
        code: 'jzjexz',
      },
    };
    toPublish('ql/driver/getMyblock', payload, (obj : any) => {
      const { data } = obj;
      money.value = data.get_myblock.content;
    });
  }

  /**
   * 输入的金额/加注量
   */
  function inputeve(e) {
    let val = e.detail.value.replace(/(^\s*)|(\s*$)/g, '');
    if (!val) {
      number.value = '';
      return;
    }
    val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
    nextTick(function () {
      number.value = val;
    });
    //加注过量
    filling();
  }
  /**
   * 加注过量提示
   */
  function filling() {
    if (Number.parseInt(number.value) > Number(money.value) && props.type !== 'area') {
      showToast('加注过量');
      //计算金额
      number.value = '';
      text.value = 0;
      return;
    } else {
      //计算金额
      const a1 = Number(number.value);
      text.value = Number((a1 / props.fill_price).toFixed(2));
    }
  }
  /**
   * 取消自定义输入金额公斤数
   */
  function delFilling() {
    number.value = '';
    text.value = 0;
    emit('delFilling');
  }
  /**
   * 确认自定义输入金额公斤数
   */
  function sureFilling() {
    //加注过量
    filling();
    emit('sureFilling');
    emit('moneyInfo', number.value);
    number.value = '';
    text.value = 0;
  }
  /**
   * 打开自定义输入框
   */
  function open() {
    popup.value.open();
  }
  /**
   * 关闭自定义输入框
   */
  function close() {
    popup.value.close();
  }

  defineExpose({
    open,
    close,
  });
</script>

<style lang="less">
  @import url('../canCode/less/customInput.less');
</style>